<template>
  <a-modal
    :title="'查看模板详情'"
    :visible="true"
    width="70%"
    :footer="null"
    @cancel="reset"
  >
    <div class="main">
      <a-card style="width:40%">
        <div class="left">
             {{detail.example}}
        </div>
        <div class="exam">内容示例</div>
      </a-card>
      <a-card class="right">
        <a-row class="line">
          <a-col span="6">
            模板ID
          </a-col>
          <a-col span="18" >
            <p>{{detail.templateId}}</p>
            <span class="tip">开发者调用模板消息接口时需提供模板ID</span>
          </a-col>
        </a-row>
        <a-row class="line">
          <a-col span="6">
            标题
          </a-col>
          <a-col span="18">
            {{detail.title}}
          </a-col>
        </a-row>
        <a-row class="line">
          <a-col span="6">
            行业
          </a-col>
          <a-col span="18">
            {{detail.deputyIndustry}}
          </a-col>
        </a-row>
        <a-row class="line">
          <a-col span="6">
           详细内容
          </a-col>
          <a-col span="18"  style="white-space: pre-line;margin-top: -20px;">
            {{detail.content}}
          </a-col>
        </a-row>
        <a-row class="tip">
          在发送时，需要将内容中的参数（{.DATA}）内为参数）,赋值替换成需要的信息
        </a-row>

      </a-card>

    </div>

  </a-modal>
</template>

<script>
import { postAction } from '@/api/manage'
export default {
  props: {
    detail: {
      type: String,
      default: null
    }
  },

  data() {
    return {
      urlKey: 'basemgt-wx',
      menuType: [],
      id: '',
      tagId: '',
      formItemLayout: {
        labelCol: {
          xl: { span: 5 },
          xs: { span: 5 },
          sm: { span: 6 }
        },
        wrapperCol: {
          xl: { span: 8 },
          xs: { span: 12 },
          sm: { span: 12 }
        }
      },
      loading: false,
      form: this.$form.createForm(this),
      showTable: false
    }
  },

  created() {},

  methods: {
    reset() {
      this.form.resetFields()
      this.$emit('closeDetail')
    }
  }
}
</script>
<style scoped>
.main {
  display: flex;
  justify-content: space-between;
}
.left {
  white-space: pre-line;
}
.right {
  width: 60%;
}
.exam{
    color: rgb(150, 151, 153);
    font-size: 20px;
    margin-top: 30px;
    text-align: center;
}
.line{
        margin-bottom: 20px;
}
.tip{
        color: #969799;
    font-size: 12px;
}
</style>

